<template>
	<div class="person">
		<h1>Person组件</h1>
		<h3>姓名：{{mingzi}}</h3>
		<h3>年龄：{{nianling2+1}}</h3>
		<h3>性别：{{xingbie}}</h3>
		<h3>所属学校：{{school}}</h3>
		<h3>爱好：{{hobby}}</h3>
		<button @click="nianling2 += 1">年龄+1岁</button> <br><br>
		<button @click="addHobby">追加一个名为【学习】的爱好</button>
	</div>
</template>

<script>
	export default {
		name:'Person',
		
		data() {
			return {
				nianling2:this.nianling
			}
		},

		//第一种接收prop方式，只是单纯的接收
		props:['mingzi','nianling','xingbie','school','hobby'],

		//第二种接收prop方式，接收的同时，限制数据的类型
		/* props:{
			mingzi:String,
			nianling:Number,
			xingbie:String,
			school:String,
			hobby:Array,
		}, */

		//第三种接收prop方式，接收的同时，限制数据的类型、指定默认值、配置必要性
		/* props:{
			mingzi:{
				type:String, //限制类型，坑：若压根没传mingzi，那么该配置不奏效
				default:'二狗子',//默认值
				required:true //必须要有
			},
			nianling:{
				type:Number, //限制类型
				default:89,//默认值
				required:true //必须要有
			},
			xingbie:{
				type:String, //限制类型
				default:'男',//默认值
				required:true //必须要有
			},
			school:{
				type:String, //限制类型
				default:'戒网瘾中心',//默认值
				required:true //必须要有
			},
			hobby:{
				type:Array,
				default(){
					return ['吃饭','睡觉','上厕所']
				},
				// required:true
			}
		}, */

		mounted() {
			console.log('Person组件挂载完毕',this)
		},

		methods: {
			addHobby(){
				this.hobby.unshift('学习')
				// console.log(this.hobby)
				this.hobby = ['打游戏','谈恋爱','逛街']
			}
		},
	}
</script>

<style scoped>
	.person{
		background-color: skyblue;
		padding: 30px;
	}
</style>